<template>
  <TmDrawer :hide-header="true" unit="px" placement="bottom" :height="(systemInfo?.windowHeight ?? 0) * 0.9"
    v-model:show="show" @close="onClose">
    <view class="country-header" style="padding: 24rpx;">
      <TmIcon style="width: 40rpx" name="tmicon-times" :font-size="32" @click="show = false" />
      <TmText _style="padding-left: 16rpx" style="width: 320rpx" :font-size="32" _class="text-weight-b" label="选择国家和地区" />
    </view>
    <TmIndexes :height="1350">
      <TmIndexesItem v-for="country in countryList" :key="country.label" :title="country.label" :nav-title="country.label"
        :height="countryList.length * 300">
        <TmCell v-for="countryItem in country.countryList" :key="countryItem.code" :title="countryItem.zh"
          :right-text="countryItem.code" right-icon="" @click="onSelect(countryItem.code)" />
      </TmIndexesItem>
    </TmIndexes>
  </TmDrawer>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';
import TmIcon from '@/tmui/components/tm-icon/tm-icon.vue';
import TmDrawer from '@/tmui/components/tm-drawer/tm-drawer.vue';
import TmIndexes from '@/tmui/components/tm-indexes/tm-indexes.vue';
import TmIndexesItem from '@/tmui/components/tm-indexes-item/tm-indexes-item.vue';
import { systemStore } from '@/stores';
import { getCountryCodeList } from "@/api/app"
import type { CountryCodeItem } from "@/types"

const emit = defineEmits(['update'])
const show = ref<boolean>(false)
const countryList = ref<CountryCodeItem[]>([])
const systemInfo = computed(() => systemStore().systemInfo);

const onInit = async () => {
  if (countryList.value.length > 0) return
  const { data } = await getCountryCodeList()
  countryList.value = data
}

const onSelect = (code: string) => {
  show.value = false
  emit('update', code)
}

const onClose = () => {
  show.value = false
}

const onShow = () => {
  onInit()
  show.value = true
}

defineExpose({
  onShow
})
</script>
<style lang='scss' scoped>
.country-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;

}
</style>